<template>
  <div class="problemList bg-f2">
    <div class="bg-f2 bg-fff">
      <!-- ping -->
      <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
      <!-- 统计面板 -->
      <stas-panel :refresh="refresh" @refreshOff="panelOff($event)"></stas-panel>
      <!-- 详情 -->
      <job-details :jobDetails="jobDetails" @jobDetailsOff="details($event)"></job-details>
      <!-- 搜索 -->
      <el-form :inline="true" :model="searchForm" class="form-inline">
        <el-form-item
          label="工单状态:"
          style="display: block; font-size: 12px; padding-bottom: 0"
          class="checkGroup"
        >
          <el-checkbox-group v-model="searchForm.type" style="margin-top: 3px">
            <el-checkbox label="1">已受理</el-checkbox>
            <el-checkbox label="2">待确认</el-checkbox>
            <el-checkbox label="3">正常关闭</el-checkbox>
            <el-checkbox label="7">异常关闭</el-checkbox>
            <el-checkbox label="4">驳回</el-checkbox>
            <el-checkbox label="5">挂起</el-checkbox>
            <el-checkbox label="6">外派</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item multiple label="工单等级:">
          <el-select v-model="searchForm.levelVal" clearable placeholder="选择工单类型">
            <el-option label="一般" :value="1"></el-option>
            <el-option label="加急" :value="2"></el-option>
            <el-option label="紧急" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接单时间:">
          <el-date-picker
            clearable
            v-model="searchForm.AccdataTime"
            :picker-options="pickerBeginDateBefore"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="报障时间:">
          <el-date-picker
            clearable
            v-model="searchForm.RepdataTime"
            :picker-options="pickerBeginDateBefore"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item label="受理人:">
          <el-select
            v-model="searchForm.assignee"
            class="inputWidth"
            @focus="getFounder('assignee')"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in assigneeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接单人:">
          <el-select
            v-model="searchForm.taker"
            class="inputWidth"
            @focus="getFounder('taker')"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in takerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 搜索输入框 -->
        <el-form-item>
          <el-input
            v-model.trim="searchForm.val"
            prefix-icon="el-icon-search"
            clearable
            placeholder="工单编号/名称/IP"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit2()" class="btnSizeStyle">查询</el-button>
        </el-form-item>
        <!-- <el-form-item><el-button class="btnClass">打印</el-button></el-form-item> -->
        <el-form-item>
          <el-button class="btnSizeStyle btnClass">导出</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="duanXuanBtn">
      <el-radio-group v-model="radio2" size="medium" @change="duanXuanRadio">
        <el-radio-button :label="item" v-for="item in radioOptions" :key="item"></el-radio-button>
      </el-radio-group>
      </div>-->
      <!-- 表格 -->
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        :cell-class-name="addClass"
        :data="tableData"
        border
        highlight-current-row
        stripe
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column
          prop="gdbh"
          label="工单编号"
          min-width="160px"
          :show-overflow-tooltip="true"
          sortable
        >
          <template slot-scope="scope">
            <svg
              class="iconfont"
              aria-hidden="true"
              style="width: 14px; height: 14px; vertical-align: middle; padding-right: 5px"
            >
              <use
                :xlink:href="'#el-icon-myexclamatory_mark_' + exclamatoryType(scope.row.gddj).icon"
                style="font-size: 50px"
              />
            </svg>
            <!-- <el-button type="text" :disabled="showQuanXuan.show4" @click="openxianqing(scope.row)">{{scope.row.gdbh}}</el-button> -->
            <span v-html="getzcmc(scope.row)" @click="openxianqing(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column prop="zcmc" label="设备名称" min-width="165px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sbip" label="设备IP" min-width="100px"></el-table-column>
        <el-table-column label="辖区" min-width="200px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.xxdz }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="gzlbmc" label="故障类型" min-width="180px" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.lxmcs ? scope.row.lxmcs + ' / ' : '' }}</span>
            <span>{{ scope.row.gzlbmc }}</span>
          </template>
        </el-table-column>-->
        <!-- <el-table-column prop="gzms" label="故障描述" :show-overflow-tooltip="true" min-width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.gzms }}</span>
          </template>
        </el-table-column>-->
        <el-table-column prop="slrzsxm" label="受理人" min-width="80px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          prop="dqclrzsxm"
          label="接单人"
          min-width="80px"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <!-- <el-table-column prop="bzsj" label="报障时间" width="150px" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.bzsj | dateFormat }}</span>
          </template>
        </el-table-column>-->
        <el-table-column prop="slsj" label="接单时间" width="150px" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.slsj | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gdzt" label="工单状态" min-width="88px">
          <template slot-scope="scope">
            <span
              :class="['workOrderType', 'active-' + scope.row.gdzt]"
            >{{ caculType(scope.row.gdzt) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="170" align="right">
          <template slot-scope="scope">
            <div class="operations">
              <!-- 不可以点击加上 noAction这个类名 -->
              <el-button
                type="text"
                :disabled="showQuanXuan.show7 && showQuanXuan.show8"
                v-if="userxx.zsxm === scope.row.dqclrzsxm ? true : false"
                v-show="scope.row.gdzt === 3 || scope.row.gdzt === 7 ? false : true"
                @click="tianxie(scope.row)"
              >提交</el-button>
              <span
                class="operation"
                v-if="userxx.zsxm === scope.row.dqclrzsxm ? true : false"
                v-show="scope.row.gdzt === 3 || scope.row.gdzt === 7 ? false : true"
              ></span>
              <el-button
                :disabled="chuLiShow"
                v-show="scope.row.gdzt === 3 || scope.row.gdzt === 7 ? false : true"
                type="text"
                @click="pending(scope.row)"
              >审核</el-button>
              <span
                class="operation"
                v-show="scope.row.gdzt === 3 || scope.row.gdzt === 7 ? false : true"
              ></span>
              <el-button
                type="text"
                :disabled="scope.row.sbip !== '' && scope.row.sbip !== null ? false : true"
                class="Btn_nan"
                @click="yuanChenKZ(scope.row)"
              >远程控制</el-button>
              <span class="operation"></span>
              <el-button
                :disabled="scope.row.sbip !== '' && scope.row.sbip !== null ? false : true"
                type="text"
                class="Btn_nan"
                @click="showPingOk(scope.row)"
              >ping</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12">
          <div class="bigBOx btnBefore">
            <div class="imgBox" v-for="(item, index) in listIcon" :key="index">
              <svg class="iconfont imgIcon" aria-hidden="true">
                <use :xlink:href="`#el-icon-myexclamatory_mark_${item.icon}`" />
              </svg>
              <span>{{ item.text }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
      <!-- 正常关闭工单提示框 -->
      <el-dialog
        title="处理工单"
        :visible.sync="dialogEvaluate"
        @close="faultClose(null)"
        width="880px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        class="closeDialog"
      >
        <div class="caozouBox">
          <span>操作：</span>
          <el-radio-group v-model="gondanBox" @change="radiochange">
            <el-radio
              :disabled="item.show"
              :label="item.title"
              v-for="item in gondanBoxList"
              :key="item.title"
            >{{ item.title }}</el-radio>
          </el-radio-group>
        </div>
        <!-- 关闭工单 -->
        <el-form
          v-if="isShow"
          v-show="gondanBox === '关闭工单' ? true : false"
          :model="normalClosureForm"
          ref="normalClosureForm"
        >
          <el-form-item>
            <div style="overflow: hidden" class="userInfo">
              <img src="@/assets/images/touXiang.jpg" alt />
              <ul>
                <li>{{ normalClosureForm.name }}</li>
                <li>{{ normalClosureForm.hm }}</li>
              </ul>
            </div>
          </el-form-item>
          <el-form-item label="响应速度" class="starts">
            <el-rate v-model="normalClosureForm.shud" show-text></el-rate>
          </el-form-item>
          <el-form-item label="排障能力" class="starts">
            <el-rate v-model="normalClosureForm.nenli" show-text></el-rate>
          </el-form-item>
          <el-form-item label="服务态度" class="starts">
            <el-rate v-model="normalClosureForm.taidu" show-text></el-rate>
          </el-form-item>
          <el-form-item prop="evaluate">
            <el-input type="textarea" :rows="5" :maxlength="255" resize="none" show-word-limit v-model.trim="normalClosureForm.evaluate" placeholder="请输入评价"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="faultClose(null)" class="btnSizeStyle">取消</el-button>
            <el-button type="primary" @click="guanSubmit" :loading="closeBtnLoad" :disabled="showQuanXuan.show1" v-preventReClick class="btnSizeStyle">确定</el-button>
          </el-form-item>
        </el-form>
        <!-- 异常关闭工单 -->
        <el-form
          :model="closureForm"
          ref="closureFormRef"
          label-width="100px"
          :rules="closureFormRules"
          v-show="gondanBox === '关闭工单' ? true : false"
          v-if="!isShow"
        >
          <!-- <span>这是一段信息</span> -->
          <span style="color: #5a5e66; font-size: 14px">
            <svg
              class="iconfont"
              aria-hidden="true"
              style="width: 18px; height: 18px; vertical-align: bottom; padding-right: 5px"
            >
              <use xlink:href="#el-icon-mywarning" style="font-size: 50px" />
            </svg>
            当前工单状态为：{{ titleName }}，点击确定系统将强制关闭工单，请如实填写关闭原因。
          </span>
          <el-form-item label="关闭原因:" prop="text" class="closeInfo">
            <el-input type="textarea" :rows="5" :maxlength="255" resize="none" show-word-limit v-model.trim="closureForm.text" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="faultClose('closureFormRef')" class="btnSizeStyle">取消</el-button>
            <el-button type="primary" :loading="abnormalCloseLoad" :disabled="showQuanXuan.show1" @click="yicGB('closureFormRef')" v-preventReClick class="btnSizeStyle">确定</el-button>
          </el-form-item>
        </el-form>
        <!-- 重新派单 -->
        <div v-show="gondanBox === '重新派单' ? true : false">
          <el-form :model="dispatchOptions" :inline="true" label-position="left ">
            <el-form-item label="机构:">
              <el-select
                v-model="dispatchOptions.organsVal"
                :no-data-text="tiText1"
                filterable
                clearable
                placeholder="请选择/搜索"
              >
                <el-option
                  v-for="item in jgOrgans"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职务:">
              <el-select
                v-model="dispatchOptions.zhiWuVal"
                :no-data-text="zhiWuText"
                clearable
                placeholder="请选择职务"
              >
                <el-option
                  v-for="item in zhiWuData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model.trim="dispatchOptions.fault"
                prefix-icon="el-icon-search"
                clearable
                placeholder="搜索运维人员名称"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="ssGD" class="btnSizeStyle">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            stripe
            border
            :data="dispatchOptions.gridData"
            @row-click="addRowClick"
            :header-cell-style="{ backgroundColor: '#ECF3FC', borderBottom: '1px solid #CEE1F7' }"
            height="250"
          >
            <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
            <el-table-column label="姓名" width="200" style="position: relative">
              <template slot="header">
                <span>姓名</span>
              </template>
              <template slot-scope="scope">
                <el-radio-group
                  v-model="dispatchOptions.templateRadio"
                  @click.native.stop
                  @change="getTemplateRow(scope.row)"
                  class="lineH0"
                >
                  <el-radio :label="scope.row.id">
                    <span
                      style="display: inline-block"
                    >{{ scope.row.zsxm + `${scope.row.lxdh ? `(${scope.row.lxdh})` : ''}` }}</span>
                  </el-radio>
                </el-radio-group>
                <!-- <el-radio :label="scope.$index" v-model="dispatchOptions.templateRadio" @change.native="getTemplateRow(scope.$index, scope.row)"></el-radio> -->
              </template>
            </el-table-column>
            <!-- <el-table-column property="zsxm" label="姓名" min-width="200">
                <template slot-scope="scope">{{ scope.row.zsxm + `(${scope.row.lxdh})` }}</template>
            </el-table-column>-->
            <el-table-column property="zhdf" label="综合评分" min-width="200">
              <template slot-scope="scope">
                <el-rate v-model="scope.row.zhdf" disabled show-score text-color="#ff9900"></el-rate>
              </template>
            </el-table-column>
            <!-- <el-table-column property="ssjs" :show-overflow-tooltip="true" label="角色" min-width="200">
                <template slot-scope="scope">
                  <span>{{ scope.row.ssjs }}</span>
                </template>
            </el-table-column>-->
            <el-table-column
              property="zwlist"
              :show-overflow-tooltip="true"
              label="职务"
              min-width="200"
            >
              <template slot-scope="scope">
                <span>{{ getLxName(scope.row.zwlist) }}</span>
                <!-- <span>{{ scope.row.zwlist }}</span> -->
              </template>
            </el-table-column>
            <el-table-column property="gdsl" label="接单数" width="80"></el-table-column>
          </el-table>
          <el-form :model="dispatchOptions" label-position="left" style="padding-bottom: 10px">
            <el-form-item label="描述:" style="margin: 0; padding-top: 10px">
              <el-input type="textarea" style="width: 95%" :rows="5" :maxlength="255" resize="none" show-word-limit v-model.trim="dispatchOptions.text" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
          <el-row class="page-row borderNone">
            <el-col :span="12">
              <el-pagination
                background
                layout="prev, pager, next, total"
                @current-change="addHandleCurrentChange"
                :current-page.sync="addCurrentPage"
                :total="addTotal"
                :hide-on-single-page="paginationValue"
                style="padding: 0"
              ></el-pagination>
            </el-col>
            <el-col :span="12">
              <el-button class="btnSizeStyle" @click="faultClose(null)">取 消</el-button>
              <el-button class="btnSizeStyle" type="primary" :loading="resendBtnLoad" :disabled="showQuanXuan.show2" @click="cPaidSubmit" v-preventReClick>提 交</el-button>
            </el-col>
          </el-row>
        </div>
        <!-- 挂起工单 -->
        <el-form
          v-show="gondanBox === '挂起工单' ? true : false"
          :model="dialogForm"
          ref="dialogForm"
          label-width="100px"
          :rules="dialogFormRules"
        >
          <el-form-item label="挂起原因:" prop="pendingVal" class="closeInfo">
            <el-input type="textarea" :rows="4" :maxlength="255" resize="none" show-word-limit v-model.trim="dialogForm.pendingVal" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="faultClose('dialogForm')" class="btnSizeStyle">取 消</el-button>
            <el-button type="primary" class="btnSizeStyle" :loading="pendingBtnLoad" :disabled="showQuanXuan.show6" @click="guaiqiSubmit('dialogForm')" v-preventReClick>确 定</el-button>
          </el-form-item>
        </el-form>
        <!-- 外派工单 -->
        <el-form
          v-show="gondanBox === '外派工单' ? true : false"
          :model="expatriateForm"
          :rules="expatriateFormRules"
          ref="expatriateForm"
          label-width="90px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="外派单位:" prop="organsVal">
                <el-select
                  style="width: 65%"
                  v-model="expatriateForm.organsVal"
                  :no-data-text="tiText1"
                  filterable
                  clearable
                  placeholder="请选择/搜索"
                  @change="waipaiChange"
                >
                  <el-option
                    v-for="item in jgOrgans"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="联系人:" prop="contacts">
                <el-input style="width: 80%" clearable v-model.trim="expatriateForm.contacts"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="职务:" prop="job">
                <el-input style="width: 80%" clearable v-model.trim="expatriateForm.job"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="岗位:" prop="post">
                <el-input style="width: 80%" clearable v-model.trim="expatriateForm.post"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="联系电话:" prop="phone">
                <el-input style="width: 80%" clearable v-model.trim="expatriateForm.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item class="btns">
                <el-button @click="faultClose('expatriateForm')" class="btnSizeStyle">取 消</el-button>
                <el-button type="primary" class="btnSizeStyle" :loading="expatriateBtnLoad" :disabled="showQuanXuan.show5" @click="waipSubmit('expatriateForm')" v-preventReClick>保 存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 驳回 -->
      <el-dialog
        title="查看驳回原因"
        :visible.sync="dialogreject"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="900px"
        class="closeDialog rejectClose"
      >
        <el-row>
          <el-col :span="12">
            <div>
              <span>工单号:</span>
              <span>{{ bohuiYY.gdbh }}</span>
            </div>
            <div>
              <span>设备名称:</span>
              <span>{{ bohuiYY.zcmc }}</span>
            </div>
            <div>
              <span>设备IP:</span>
              <span>{{ bohuiYY.ip }}</span>
            </div>
            <div>
              <span>故障类型:</span>
              <span>{{ bohuiYY.gzlxmc }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <span>接单人:</span>
              <span>{{ bohuiYY.dqclrzsxm }}</span>
            </div>
            <div>
              <span>驳回时间:</span>
              <span>{{ bohuiYY.clsj | dateFormat }}</span>
            </div>
            <div>
              <span>驳回原因:</span>
              <span>{{ bohuiYY.cznr }}</span>
            </div>
          </el-col>
        </el-row>
        <el-form :model="rejectForm" :rules="rejectRule" ref="rejectFormRef">
          <el-form-item label="驳回意见:" prop="isReject">
            <el-radio-group v-model="rejectForm.isReject">
              <el-radio :label="1">同意</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
            <div class="TrueRejectTips">同意驳回可以把此工单指派给他人；拒绝驳回工单由当前接单人负责。</div>
          </el-form-item>
          <el-form-item label="机构:" v-if="rejectForm.isReject === 1">
            <!-- <el-select v-model="rejectForm.organVal" :no-data-text="tiText1" placeholder="请选择"> -->
            <el-select
              v-model="rejectForm.organVal"
              :no-data-text="tiText1"
              placeholder="请选择"
              @change="jgZhipai"
            >
              <el-option
                :key="item.value"
                v-for="item in jgOrgans"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指派:" v-show="rejectForm.isReject === 1">
            <el-select v-model="rejectForm.assignVal" placeholder="请选择" width="260px">
              <el-option
                :key="item.value"
                v-for="item in zhiPaiRen"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拒绝原因:" v-show="rejectForm.isReject !== 1">
            <el-input type="textarea" :rows="5" :maxlength="255" resize="none" show-word-limit v-model.trim="rejectForm.guanbiliyou"></el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button @click="bohuiGB('rejectFormRef')" class="btnSizeStyle">取 消</el-button>
            <el-button type="primary" class="btnSizeStyle" :loading="turnDownBtnLoad" :disabled="showQuanXuan.show3" @click="rejectSubmit('rejectFormRef')" v-preventReClick>确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 运维人员填写表单 -->
      <el-dialog
        title="提交处理结果"
        :visible.sync="fillFormVisible"
        @close="fillClose('fillForm')"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        class="closeDialog"
        width="750px"
      >
        <el-form :model="fillForm" :rules="fillRules" ref="fillForm">
          <el-form-item>
            <el-radio-group v-model="fillForm.isRadio" @change="fillFormChange" class="fc_333">
              <el-radio :disabled="showQuanXuan.show7" :label="1">已解决，申请审核</el-radio>
              <el-radio :disabled="showQuanXuan.show7" :label="2">申请其他工程师处理</el-radio>
              <el-radio :disabled="showQuanXuan.show7" :label="3">申请外派</el-radio>
              <el-radio :disabled="showQuanXuan.show7" :label="4">申请挂起</el-radio>
              <el-radio :disabled="showQuanXuan.show8" :label="5" v-if="gdxx.gdzt === 1">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="描述" prop="fillTextarea">
            <el-input type="textarea" :rows="5" :maxlength="255" resize="none" show-word-limit v-model.trim="fillForm.fillTextarea"></el-input>
          </el-form-item>
          <el-form-item label="照片:" v-show="fillForm.isRadio === 1" style="padding-top: 10px">
            <el-upload
              action="#"
              ref="upload"
              list-type="picture-card"
              accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
              :auto-upload="false"
              :on-change="lalal"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
              <div
                class="el-upload__tip"
                slot="tip"
                style="color: #909399; padding-left: 40px"
              >只能上传jpg/png文件，且不超过2M</div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" :modal="false">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button @click="fillClose('fillForm')" class="btnSizeStyle">取 消</el-button>
            <el-button type="primary" :disabled="goudiao" :loading="submitLoad" @click="fillSubmit(fillTitle, 'fillForm')" class="btnSizeStyle" v-preventReClick>确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import StasPanel from '../../statsPanel'
import Ping from '@/components/ping/index.vue'
import jobDetails from '@/components/jobDetails/index.vue'
import { yeWu, pinT, upload } from '@/utils/allUrl.js'
import { getUrl } from '@/utils/getUrl.js'
// import { endLoading } from '@/utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
// import { globalBus } from '@/assets/js/globalBus'
export default {
  data: function() {
    return {
      radio2: '全部',
      radioOptions: ['全部', '未完成工单', '完成工单', '挂起工单', '外派工单', '驳回工单'],
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: ''
      },
      refresh: false, // 刷新面板
      jobDetails: {
        gdbh: '1591147800588945',
        show: false,
        activeName: 'basicInfo'
      }, // 关闭详情
      gondanBox: '关闭工单',
      gondanBoxList: [
        {
          title: '关闭工单',
          show: false
        },
        {
          title: '重新派单',
          show: false
        },
        {
          title: '挂起工单',
          show: false
        },
        {
          title: '外派工单',
          show: false
        }
      ],
      isShow: false,
      titleName: '',
      searchForm: {
        type: [],
        levelVal: '',
        AccdataTime: '',
        RepdataTime: '',
        val: '',
        taker: '', // 接单人
        assignee: '' // 受理人
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 挂起状态
      closureForm: {
        text: ''
      },
      // 关闭工单
      normalClosureForm: {
        url: '',
        name: '',
        hm: '',
        shud: null,
        nenli: null,
        taidu: null,
        evaluate: ''
      },
      dialogEvaluate: false,
      // 重新派单
      dispatchOptions: {
        organsVal: '',
        fault: '',
        gridData: [],
        templateRadio: '', // 是否被选中
        templateSelection: [], // 选中数据对象
        zhiWuVal: '',
        text: '', // 描述
      },
      zhiWuData: [], // 职务
      // 挂起
      dialogForm: {
        pendingVal: ''
      },
      // 外派
      expatriateForm: {
        contacts: '',
        job: '',
        post: '',
        phone: '',
        organsVal: ''
      },
      dialogreject: false,
      // 驳回原因
      bohuiYY: {
        id: '',
        gdbh: '',
        zcmc: '',
        ip: '',
        gzlxmc: '',
        dqclrzsxm: '',
        clsj: '',
        cznr: ''
      },
      rejectForm: {
        isReject: 1,
        organVal: '',
        assignVal: '',
        guanbiliyou: ''
      },
      // 运维填写
      fillFormVisible: false,
      fillForm: {
        titleMz: '处理结果描述:',
        isRadio: 1,
        fillTextarea: ''
      },
      fillTitle: '处理', // 运维人员判断处理或驳回
      rejectRule: {
        isReject: [{ required: true, message: '请选择驳回意见', trigger: 'blur' }],
        guanbiliyou: [{ required: true, message: '请填写拒绝原因', trigger: 'blur' }]
      },
      // 挂起
      dialogFormRules: {
        pendingVal: [{ required: true, message: '挂起原因不能为空' }]
      },
      // 外派
      expatriateFormRules: {
        organsVal: [{ required: true, message: '请选择外派单位', trigger: 'change' }],
        contacts: [{ pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' }],
        job: [{ pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' }],
        post: [{ pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' }],
        phone: [{ pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]
      },
      closureFormRules: {
        text: [{ required: true, message: '关闭原因不能为空', trigger: 'blur' }]
      },
      fillRules: {
        fillTextarea: [{ required: true, message: '描述不能为空', trigger: 'blur' }]
      },
      // 工单信息
      gdxx: {},
      paidUser: {
        jgId: '',
        zsxm: '',
        zhiWuVal: ''
      },
      jgOrgans: [], // 机构联系人
      userxx: {}, // 当前登入用户信息
      //  图片上传
      imgUrl: [],
      dialogVisible: false,
      dialogImageUrl: '', // 预览
      // 驳回指派人
      zhiPaiRen: [],
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        }
      },
      chuLiShow: true,
      showQuanXuan: {
        show1: true,
        show2: true,
        show3: true,
        show5: true,
        show6: true,
        show7: true,
        show8: true
      },
      goudiao: false, // 是否禁用提交或驳回
      addCurrentPage: 1,
      addTotal: 0,
      paginationValue: false, // 数据为一条时隐藏
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      listIcon: [
        { icon: 'green', text: '一般' },
        { icon: 'orange', text: '加急' },
        { icon: 'red', text: '紧急' }
      ],
      tiText1: '暂无数据', // 机构提示
      zhiWuText: '',
      listQuery: {
        sortby: '',
        order: ''
      },
      takerOptions: [], // 接单人
      assigneeOptions: [], // 受理人
      submitLoad: false, // 提交处理结果等待样式
      submitTime: null,
      closeBtnLoad: false, // 关闭工单等待样式
      closeBtnTime: null,
      abnormalCloseLoad: false, // 异常关闭等待样式
      abnormalCloseTime: null,
      resendBtnLoad: false, // 重新派单等待样式
      resendBtnTime: null,
      pendingBtnLoad: false, // 挂起工单
      pendingBtnTime: null,
      expatriateBtnLoad: false, // 外派工单
      expatriateBtnTime: null,
      turnDownBtnLoad: false, // 驳回工单等待样式
      turnDownBtnTime: null,
    }
  },
  props: ['toggleWorkOrder'],
  created() {
    this.jurisdictionBtn()
    this.userxx = JSON.parse(getUrl('userconter'))
    // 获取机构
    this.getMechanism()
    // 获取派单用户
    this.againDispatch()
    if (this.$route.params.id) {
      this.goList(this.$route.params.id)
      // globalBus.$emit('toggleWorkOrderTarget', '调用方法')
    } else {
      this.getshuju()
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    submitLoad(newVal, oldVal) {
      this.submitTime = setTimeout(() => {
        if (this.submitLoad) {
          this.submitLoad = false
        }
      }, timeLoad)
    }, // 提交处理结果
    closeBtnLoad(newVal, oldVal) {
      this.closeBtnTime = setTimeout(() => {
        if (this.closeBtnLoad) {
          this.closeBtnLoad = false
        }
      }, timeLoad)
    }, // 正常关闭
    abnormalCloseLoad(newVal, oldVal) {
      this.abnormalCloseTime = setTimeout(() => {
        if (this.abnormalCloseLoad) {
          this.abnormalCloseLoad = false
        }
      }, timeLoad)
    }, // 异常关闭
    resendBtnLoad(newVal, oldVal) {
      this.resendBtnTime = setTimeout(() => {
        if (this.resendBtnLoad) {
          this.resendBtnLoad = false
        }
      }, timeLoad)
    }, // 重新派单
    pendingBtnLoad(newVal, oldVal) {
      this.pendingBtnTime = setTimeout(() => {
        if (this.pendingBtnLoad) {
          this.pendingBtnLoad = false
        }
      }, timeLoad)
    }, // 挂起工单
    expatriateBtnLoad(newVal, oldVal) {
      this.expatriateBtnTime = setTimeout(() => {
        if (this.expatriateBtnLoad) {
          this.expatriateBtnLoad = false
        }
      }, timeLoad)
    }, // 外派工单
    turnDownBtnLoad(newVal, oldVal) {
      this.turnDownBtnTime = setTimeout(() => {
        if (this.turnDownBtnLoad) {
          this.turnDownBtnLoad = false
        }
      }, timeLoad)
    }, // 驳回工单
  },
  components: { StasPanel, Ping, jobDetails },
  computed: {
    caculType: function() {
      // 计算属性传参需要使用闭包
      return function(index) {
        const arr = ['已受理', '待确认', '正常关闭', '驳回', '挂起', '外派', '异常关闭']
        return arr[index - 1]
      }
    },
    exclamatoryType: function() {
      return function(index) {
        // <!-- el-icon-myexclamatory_mark_orange 紧急 -->
        // <!-- el-icon-myexclamatory_mark_red 加急 -->
        // <!-- el-icon-myexclamatory_mark_green 一般 -->
        // const list = [
        //   { icon: 'green', text: '一般' },
        //   { icon: 'orange', text: '加急' },
        //   { icon: 'red', text: '紧急' },
        // ]
        return this.listIcon[index - 1]
      }
    }
  },
  methods: {
    // 获取工单
    async goList(id) {
      // http://127.0.0.1:4010/ywzx/gz/toWorkOrder?SB_ID=431
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('SB_ID', id)
      this.deleteAll = []
      const { data: res } = await this.$http.post(`${yeWu}gz/toWorkOrder`, params)
      switch (res.code) {
        case '0000':
          this.tableData = res.data.list
          this.total = res.data.total
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 获取接单人/受理人
    async getFounder(val) {
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`)
      switch (res.code) {
        case '0000':
          this[`${val}Options`] = JSON.parse(
            JSON.stringify(res.data.list)
              .replace(/zsxm/g, 'label')
              .replace(/id/g, 'value')
          )
          break
        default:
          break
      }
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.getshuju()
    },
    getLxName(arr) {
      const list = []
      let html = ''
      if (arr) {
        arr.forEach(item => {
          list.push(item.lx_MC)
        })
        html = list.join(',')
      }
      return html
    },
    getzcmc(row) {
      return `<span class="fontColor">${row.gdbh}</span>`
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      const arr = []
      menus.forEach(item => {
        if (item.qxdm === 'YWZX_GDGL_GDLB') {
          item.children.forEach(item2 => {
            if (item2.qxdm === 'gdjs:GuanBi') {
              this.showQuanXuan.show1 = false // 关闭
              arr.push(this.showQuanXuan.show1)
            } else if (item2.qxdm === 'gdjs:PaiDan') {
              this.showQuanXuan.show2 = false // 派单
              arr.push(this.showQuanXuan.show2)
            } else if (item2.qxdm === 'gdjs:BoHuiShenHe') {
              this.showQuanXuan.show3 = false // 驳回审核
              arr.push(this.showQuanXuan.show3)
            } else if (item2.qxdm === 'gdjs:WaiPai') {
              this.showQuanXuan.show5 = false // 外派
              arr.push(this.showQuanXuan.show5)
            } else if (item2.qxdm === 'gdjs:GuaQi') {
              this.showQuanXuan.show6 = false // 挂起
              arr.push(this.showQuanXuan.show6)
            } else if (item2.qxdm === 'gdjs:FaQiBoHui') {
              this.showQuanXuan.show8 = false // 发起驳回
              arr.push(this.showQuanXuan.show8)
            } else if (item2.qxdm === 'gdjs:ChuLi') {
              this.showQuanXuan.show7 = false // 提交处理结果
              arr.push(this.showQuanXuan.show7)
              this.goudiao = this.showQuanXuan.show7
            }
          })
        }
      })
      this.chuLiShow = arr.length === 0
    },
    getshuju() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      if (this.$route.params.id) {
        params.append('SB_ID', this.$route.params.id)
      }
      this.setList(params)
    },
    async setList(params) {
      this.deleteAll = []
      // const { data: res } = await this.$http.post(`${yeWu}gdjs/list`, params)
      const { data: res } = await this.$http.post(`${yeWu}gdgl/selectGongDanGuanLiList`, params)
      switch (res.code) {
        case '0000':
          this.tableData = res.data.list
          this.total = res.data.total
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 获取机构
    async getMechanism() {
      const params = new URLSearchParams()
      params.append('jglx', 4)
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      const arr = []
      if (res.code === '0013') {
        this.tiText1 = res.message
        return (this.jgOrgans = [])
      }
      res.data.list.forEach((item, index) => {
        const k = {
          value: item.id,
          label: item.jgmc,
          lxr: item.lxr,
          lxrdh: item.lxrdh
        }
        arr.push(k)
      })
      this.jgOrgans = arr
    },
    // 获取职务
    async getZhiWu() {
      const params = new URLSearchParams()
      params.append('CXLX', 'GONGDAN')
      const { data: res } = await this.$http.post(`${pinT}zwzc/list`, params)
      const arr = []
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item, index) => {
            const k = {
              value: item.id,
              label: item.zwzcmc
            }
            arr.push(k)
          })
          this.zhiWuData = arr
          break
        default:
          this.zhiWuData = []
          this.zhiWuText = res.message
          break
      }
    },
    onSubmit2() {
      this.currentPage = 1
      this.pageSize = 10
      this.onSubmit()
    },
    // 搜索
    onSubmit() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const { type, levelVal, AccdataTime, RepdataTime, val, taker, assignee } = this.searchForm
      const params = new URLSearchParams()
      // 接单时间
      if (AccdataTime) {
        params.append('SLKSSJ', `${AccdataTime[0]} 00:00:00`)
        params.append('SLJSSJ', `${AccdataTime[1]} 23:59:59`)
      }
      // 报障时间
      if (RepdataTime) {
        params.append('BZKSSJ', RepdataTime[0])
        params.append('BZJSSJ', RepdataTime[1])
      }
      if (type.length > 0) {
        params.append('GDZTS', type)
      }
      params.append('GDDJ', levelVal)
      params.append('GDBH_SBMC_SBIP_DQCLR', val)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('SLR_ID', assignee) //  受理人
      params.append('DQCLR', taker) // 接单人
      if (this.$route.params.id) {
        params.append('SB_ID', this.$route.params.id)
      }
      this.setList(params)
    },
    // duanXuanRadio(val) {
    //   clearTimeout(this.tableTimer)
    //   this.tableLoad = true
    //   const params = new URLSearchParams()
    //   params.append('GDZT', val)
    //   params.append('M_', this.currentPage)
    //   params.append('N_', this.pageSize)
    //   this.setList(params)
    // },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.onSubmit()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.onSubmit()
    },
    // 处理按钮
    async pending(scope) {
      this.gdxx = scope
      if (scope.gdzt === 2) {
        this.gondanBoxList = [
          {
            title: '关闭工单',
            show: this.showQuanXuan.show1
          },
          {
            title: '重新派单',
            show: this.showQuanXuan.show2
          },
          {
            title: '挂起工单',
            show: this.showQuanXuan.show6
          },
          {
            title: '外派工单',
            show: this.showQuanXuan.show5
          }
        ]
        this.normalClosureForm.name = scope.dqclrzsxm
        this.normalClosureForm.hm = scope.dqclrlxdh
        this.isShow = true
        this.titleName = ''
        this.dialogEvaluate = true
      } else if (scope.gdzt === 1) {
        this.gondanBoxList = [
          {
            title: '关闭工单',
            show: this.showQuanXuan.show1
          },
          {
            title: '重新派单',
            show: this.showQuanXuan.show2
          }
        ]
        this.dialogEvaluate = true
        this.isShow = false
        this.titleName = '已受理'
      } else if (scope.gdzt === 4) {
        // 查看驳回原因-填写驳回意见
        this.againDispatch() // 指派人员信息
        const params = new URLSearchParams()
        params.append('CZLX', 3)
        params.append('GDBH', scope.gdbh)
        const { data: res } = await this.$http.post(`${yeWu}gdjs/dcczmx`, params)
        if (res.code === '0014') {
          return
        } else if (res.code !== '0000') {
          return this.$message({
            type: 'error',
            message: res.message,
            center: true
          })
        }
        this.bohuiYY = res.data
        if (this.showQuanXuan.show3) {
          this.$message({
            type: 'error',
            message: '您没有查看驳回工单的权限！请联系管理员',
            center: true
          })
        }
        this.dialogreject = !this.showQuanXuan.show3
      } else if (scope.gdzt === 5) {
        this.gondanBoxList = [
          {
            title: '关闭工单',
            show: this.showQuanXuan.show1
          },
          {
            title: '重新派单',
            show: this.showQuanXuan.show2
          }
        ]
        this.dialogEvaluate = true
        this.isShow = false
        this.titleName = '挂起'
      } else if (scope.gdzt === 6) {
        this.gondanBoxList = [
          {
            title: '关闭工单',
            show: this.showQuanXuan.show1
          },
          {
            title: '重新派单',
            show: this.showQuanXuan.show2
          },
          {
            title: '挂起工单',
            show: this.showQuanXuan.show6
          },
          {
            title: '外派工单',
            show: this.showQuanXuan.show5
          }
        ]
        this.dialogEvaluate = true
        this.isShow = false
        this.titleName = '外派'
      }
    },
    // 提交
    tianxie(scope) {
      this.gdxx = scope
      // console.log(this.gdxx)
      this.fillFormVisible = true
    },
    // 处理操作
    radiochange(val) {
      if (val === '重新派单') {
        this.getZhiWu() // 获取职务
        this.againDispatch() // 获取用户列表
      }
    },
    // 关闭驳回
    bohuiGB(rejectFormRef) {
      this.$refs.rejectFormRef.resetFields()
      this.dialogreject = false
      this.bohuiYY = {
        id: '',
        gdbh: '',
        zcmc: '',
        ip: '',
        gzlxmc: '',
        dqclrzsxm: '',
        clsj: '',
        cznr: ''
      }
      this.rejectForm = {
        isReject: 1,
        organVal: '',
        assignVal: '',
        guanbiliyou: ''
      }
      this.paidUser.jgId = ''
      this.paidUser.zsxm = ''
      this.paidUser.zhiWuVal = ''
    },
    // 机构改变筛选
    jgZhipai(e) {
      this.paidUser.jgId = e
      this.againDispatch()
    },
    // 驳回
    rejectSubmit(rejectFormRef) {
      const { isReject, guanbiliyou, assignVal, organVal } = this.rejectForm
      this.$refs.rejectFormRef.validate(async valid => {
        if (valid) {
          clearTimeout(this.turnDownBtnTime)
          this.turnDownBtnLoad = true
          if (isReject === 1) {
            const params2 = new URLSearchParams()
            params2.append('GDBH', this.gdxx.gdbh)
            params2.append('CZR_ID', this.userxx.id)
            params2.append('CZNR', organVal)
            params2.append('YHID', assignVal)
            params2.append('BHYJ', 1)
            const { data: res } = await this.$http.post(`${yeWu}gdjs/BoHuiShenHe`, params2)
            this.turnDownBtnLoad = false
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true
              })
            }
            this.bohuiGB(rejectFormRef)
            this.getshuju()
            this.refresh = true
          } else {
            const params = new URLSearchParams()
            params.append('GDBH', this.gdxx.gdbh)
            params.append('CZR_ID', this.userxx.id)
            params.append('CZNR', guanbiliyou)
            params.append('YHID', 0)
            params.append('BHYJ', 2)
            const { data: res } = await this.$http.post(`${yeWu}gdjs/BoHuiShenHe`, params)
            this.turnDownBtnLoad = false
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true
              })
            }
            this.bohuiGB(rejectFormRef)
            this.getshuju()
            this.refresh = true
          }
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true
          })
          return false
        }
      })
    },
    // 点击每一行事件
    addRowClick(row, column, event) {
      this.dispatchOptions.templateRadio = row.id
      this.dispatchOptions.templateSelection = row
    },
    getTemplateRow(row) {
      console.log(row)
      this.dispatchOptions.templateSelection = row
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      // console.log('row:', row, 'column:', column, 'rowIndex:', rowIndex, 'columnIndex:', columnIndex)
      // if (columnIndex === 1) {
      //   return 'fontColor'
      // }
    },
    yuanChenKZ(scope) {
      if (scope.zclx === '53') {
        this.$router.push('/mainboard')
        localStorage.setItem('SN', scope.sbxlh)
        localStorage.setItem('password', scope.dlmm)
        localStorage.setItem('IP', scope.sbip)
        localStorage.setItem('XQBM', scope.zcxqbm)
        sessionStorage.setItem('mianUrl', '')
        localStorage.setItem('zcmc', scope.zcmc)
        this.$router.push({ name: 'mainboaredit' })
      } else {
        window.open('http://' + scope.sbip, '_blank')
      }
    },
    // ping
    showPingOk(scope) {
      this.ping.speedOpen = true
      this.ping.ip = scope.sbip
      this.ping.name = scope.zcmc
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: ''
      }
    },
    panelOff(val) {
      this.refresh = val.type
    },
    // 关闭详情
    details(val) {
      this.jobDetails = {
        show: val.type,
        gdbh: '',
        activeName: 'basicInfo'
      }
    },
    // 关闭工单提交
    async guanSubmit() {
      clearTimeout(this.closeBtnTime)
      this.closeBtnLoad = true
      const { evaluate, nenli, shud, taidu } = this.normalClosureForm
      const params = new URLSearchParams()
      params.append('GDBH', this.gdxx.gdbh)
      params.append('CZR_ID', this.userxx.id)
      params.append('GD_ID', this.gdxx.id)
      params.append('CZR_ID', this.gdxx.slr_ID)
      params.append('JDR_ID', this.gdxx.dqclr_ID)
      params.append('CZNR', evaluate)
      params.append('XYSD', shud)
      params.append('PZNL', nenli)
      params.append('FWTD', taidu)
      params.append('CZLX', 7)
      const { data: res } = await this.$http.post(`${yeWu}gdjs/GuanBi`, params)
      this.closeBtnLoad = false
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true
        })
      }
      this.faultClose(null)
      this.onSubmit()
      this.refresh = true
    },
    // 重新派单提交
    async cPaidSubmit() {
      // console.log(this.dispatchOptions)
      clearTimeout(this.abnormalCloseTime)
      this.abnormalCloseLoad = true
      const { templateSelection } = this.dispatchOptions
      const params = new URLSearchParams()
      params.append('GDBH', this.gdxx.gdbh)
      params.append('CZR_ID', this.userxx.id)
      params.append('YHID', templateSelection.id || '')
      params.append('ZSXM', templateSelection.zsxm || '')
      params.append('CZNR', this.dispatchOptions.text)
      const { data: res } = await this.$http.post(`${yeWu}gdjs/PaiDan`, params)
      this.abnormalCloseLoad = false
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true
        })
      }
      this.faultClose(null)
      // this.getshuju()
      this.onSubmit()
      this.againDispatch()
      this.refresh = true
    },
    // 挂起工单提交
    guaiqiSubmit(dialogForm) {
      const { pendingVal } = this.dialogForm
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          clearTimeout(this.pendingBtnTime)
          this.pendingBtnLoad = true
          const params = new URLSearchParams()
          params.append('GDBH', this.gdxx.gdbh)
          params.append('CZR_ID', this.userxx.id)
          params.append('CZNR', pendingVal)
          const { data: res } = await this.$http.post(`${yeWu}gdjs/GuaQi`, params)
          this.pendingBtnLoad = false
          if (res.code === '0014') {
            return
          } else if (res.code !== '0000') {
            return this.$message({
              type: 'error',
              message: res.message,
              center: true
            })
          }
          this.faultClose(dialogForm)
          // this.getshuju()
          this.onSubmit()
          this.refresh = true
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true
          })
          return false
        }
      })
    },
    // 异常工单关闭
    yicGB(closureFormRef) {
      const { text } = this.closureForm
      this.$refs.closureFormRef.validate(async valid => {
        if (valid) {
          clearTimeout(this.abnormalCloseTime)
          this.abnormalCloseLoad = true
          const params = new URLSearchParams()
          params.append('GDBH', this.gdxx.gdbh)
          params.append('CZR_ID', this.userxx.id)
          params.append('CZNR', text)
          params.append('CZLX', 8)
          const { data: res } = await this.$http.post(`${yeWu}gdjs/GuanBi`, params)
          this.abnormalCloseLoad = false
          if (res.code === '0014') {
            return
          } else if (res.code !== '0000') {
            return this.$message({
              type: 'error',
              message: res.message,
              center: true
            })
          }
          this.faultClose(closureFormRef)
          // this.getshuju()
          this.onSubmit()
          this.refresh = true
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true
          })
          return false
        }
      })
    },
    // 外派
    waipSubmit(expatriateForm) {
      const { organsVal, contacts, job, post, phone } = this.expatriateForm
      this.$refs.expatriateForm.validate(async valid => {
        if (valid) {
          clearTimeout(this.expatriateBtnTime)
          this.expatriateBtnLoad = true
          const params = new URLSearchParams()
          params.append('GDBH', this.gdxx.gdbh)
          params.append('CZR_ID', this.userxx.id)
          this.jgOrgans.forEach(item => {
            if (item.value === this.expatriateForm.organsVal) {
              console.log(item.label)
              params.append('CZNR', `外派工单给${item.label}的${item.lxr}`)
            }
          })
          // params.append('CZNR', '外派工单')
          params.append('WPDW_ID', organsVal || 0)
          params.append('WPLXR', contacts)
          params.append('ZW', job)
          params.append('GW', post)
          params.append('LXDH', phone)
          const { data: res } = await this.$http.post(`${yeWu}gdjs/WaiPai`, params)
          this.expatriateBtnLoad = false
          if (res.code === '0014') {
            return
          } else if (res.code !== '0000') {
            return this.$message({
              type: 'error',
              message: res.message,
              center: true
            })
          }
          this.faultClose(expatriateForm)
          // this.getshuju()
          this.onSubmit()
          this.refresh = true
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true
          })
          return false
        }
      })
    },
    // 关闭重新派单
    faultClose(resfVal) {
      if (resfVal) {
        this.$refs[resfVal].resetFields()
      }
      // 关闭工单
      this.normalClosureForm = {
        url: '',
        name: '',
        hm: '',
        shud: null,
        nenli: null,
        taidu: null,
        evaluate: ''
      }
      // 重新派单
      this.dispatchOptions.organsVal = ''
      this.dispatchOptions.fault = ''
      this.paidUser.jgId = ''
      this.paidUser.zsxm = ''
      this.paidUser.zhiWuVal = ''
      this.dispatchOptions.templateRadio = ''
      this.dispatchOptions.text = ''
      this.dispatchOptions.templateSelection = []
      this.addCurrentPage = 1
      // this.dispatchOptions = {
      //   organsVal: '',
      //   fault: '',
      //   gridData: [],
      //   templateRadio: false, // 是否被选中
      //   templateSelection: [] // 选中数据对象
      // }
      // 挂起
      this.dialogForm = {
        pendingVal: ''
      }
      // 外派
      this.expatriateForm = {
        contacts: '',
        job: '',
        post: '',
        phone: '',
        organsVal: ''
      }
      // 驳回
      this.rejectForm = {
        isReject: 1,
        organVal: '',
        assignVal: '',
        guanbiliyou: ''
      }
      this.dialogEvaluate = false
      this.gondanBox = '关闭工单'
      this.isShow = false
    },
    // 派单搜索
    ssGD() {
      const { organsVal, fault, zhiWuVal } = this.dispatchOptions
      this.paidUser.jgId = organsVal
      this.paidUser.zsxm = fault
      this.paidUser.zhiWuVal = zhiWuVal
      // 重新派单-用户数据
      this.againDispatch()
    },
    // 用户数据
    againDispatch() {
      const { jgId, zsxm, zhiWuVal } = this.paidUser
      const params = new URLSearchParams()
      params.append('ZZJG_ID', jgId)
      params.append('ZSXM', zsxm)
      params.append('M_', this.addCurrentPage)
      params.append('N_', 10)
      params.append('ZW_ID', zhiWuVal)
      this.getYhPfFun(params)
    },
    async getYhPfFun(params) {
      const arr = []
      const { data: res } = await this.$http.post(`${yeWu}gdjs/YongHuList`, params)
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        return
      } else if (res.code !== '0000') {
        this.$message({
          type: 'error',
          message: res.message,
          center: true
        })
        return (this.dispatchOptions.gridData = [])
      }
      res.data.list.forEach(item => {
        const js = Object.values(item.ssjs).join(',')
        item.ssjs = js
      })
      this.dispatchOptions.gridData = res.data.list
      res.data.list.forEach(item => {
        const k = {
          value: item.id,
          label: item.zsxm
        }
        arr.push(k)
      })
      this.zhiPaiRen = arr
      this.addTotal = res.data.countList - ''
    },
    // 外派单位选择机构时
    waipaiChange(val) {
      if (val) {
        this.jgOrgans.forEach(item => {
          if (item.value === val) {
            this.expatriateForm.contacts = item.lxr
            this.expatriateForm.phone = item.lxrdh
          }
        })
      } else {
        this.expatriateForm.contacts = ''
        this.expatriateForm.phone = ''
      }
    },
    // 运维填写表单操作按钮
    fillFormChange(val) {
      if (val === 1) {
        this.fillForm.titleMz = '处理结果描述:'
        this.fillTitle = '处理'
        this.goudiao = this.showQuanXuan.show7
      } else {
        this.fillForm.titleMz = '驳回描述:'
        this.fillTitle = '驳回'
        this.goudiao = this.showQuanXuan.show8
      }
    },
    // 关闭填写表单
    fillClose(fillForm) {
      this.$refs.fillForm.resetFields()
      this.fillFormVisible = false
      this.fillTitle = '处理'
      this.$refs.upload.clearFiles()
      this.imgUrl = []
      this.goudiao = this.showQuanXuan.show7
      this.fillForm = {
        titleMz: '处理结果描述:',
        isRadio: 1,
        fillTextarea: ''
      }
    },
    fillSubmit(fillTitle, fillForm) {
      // console.log(fillForm.isRadio, fillForm)
      // fillForm.isRadio
      const { fillTextarea, isRadio } = this.fillForm
      this.$refs.fillForm.validate(async valid => {
        if (valid) {
          clearTimeout(this.submitTime)
          this.submitLoad = true
          if (isRadio === 5) {
            // 驳回
            const params = new URLSearchParams()
            params.append('GDBH', this.gdxx.gdbh)
            params.append('CZR_ID', this.userxx.id)
            params.append('CZNR', fillTextarea)
            params.append('YHID', 0)
            const { data: res } = await this.$http.post(`${yeWu}gdjs/FaQiBoHui`, params)
            this.submitLoad = false
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true
              })
            }
            this.fillClose(fillForm)
            this.getshuju()
            this.refresh = true
          } else {
            const params = new URLSearchParams()
            params.append('GDBH', this.gdxx.gdbh)
            params.append('CZR_ID', this.userxx.id)
            params.append('imgs', JSON.stringify(this.imgUrl))
            params.append('CZNR', fillTextarea)
            params.append('CZBT', isRadio)
            console.log(isRadio)
            const { data: res } = await this.$http.post(`${yeWu}gdjs/ChuLi`, params)
            this.submitLoad = false
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true
              })
            }
            this.fillClose(fillForm)
            // this.getshuju()
            this.onSubmit()
            this.refresh = true
          }
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true
          })
          return false
        }
      })
    },
    // 删除图片
    handleRemove(a) {
      const index = this.imgUrl.findIndex(item => item.uid === a.uid)
      this.imgUrl.splice(index, 1)
    },
    // 添加图片
    async lalal(el) {
      let videoSize = el.size / (1024 * 1024) // 转成M格式
      videoSize = videoSize.toFixed(1) // 保留小数点后一位
      if (videoSize > 2) {
        const dele = this.$refs.upload.uploadFiles
        const index = dele.findIndex(item => item.uid === el.uid)
        dele.splice(index, 1)
        // this.$refs.upload.uploadFiles
        return this.$message({
          type: 'error',
          message: '图片超过最大限制2M',
          center: true
        })
      } else {
        const file = el.raw
        const fd = new FormData()
        let arr = {}
        fd.append('file', file) // 传文件
        fd.append('type', 3) // 传文件
        const { data: res } = await this.$http.post(`${upload}`, fd)
        res.data.forEach(item => {
          arr = {
            uid: el.uid,
            url: item
          }
        })
        this.imgUrl.push(arr)
      }
    },
    // 预览
    handlePictureCardPreview(e) {
      this.dialogImageUrl = e.url
      this.dialogVisible = true
    },
    // 工单详情
    openxianqing(scope) {
      this.jobDetails = {
        show: true,
        gdbh: scope.gdbh,
        activeName: 'basicInfo'
      }
    },
    addHandleCurrentChange(val) {
      this.addCurrentPage = val
      this.againDispatch() // 获取用户列表(一线工程师/二线工程师/管理员)
    }
  }
}
</script>
<style lang="scss" scoped>
$FAFAFA: #fafafa;
$c7A7A7A: #7a7a7a;
$c333333: #333333;
$F5F7FA: #f5f7fa;
$c797A7B: #797a7b;
// 工单列表

::v-deep .fc_333 .el-radio__label {
  color: $c333333;
}
// 表格中单选需要加上
::v-deep .lineH0 {
  // .el-radio__input {
  //   line-height: 0;
  // }
  .el-radio__original {
    top: unset;
  }
}
.problemList {
  .el-input {
    height: 30px;
    line-height: 30px;
  }
  .form-inline {
    margin-top: 5px;
    padding-bottom: 0;
  }
  .el-table {
    border: 1px solid #eaeaea;
    border-bottom: none;
  }
  .btnClass {
    background: rgba(232, 243, 255, 1);
    border: 1px solid rgba(163, 208, 253, 1);
    color: #1c89fa;
  }
  .sign {
    float: left;
    display: flex;
    height: 55px;
    line-height: 60px;
    div {
      margin-right: 20px;
      img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }
  .deviceName {
    display: flex;
    align-items: center;
  }
  .operation {
    display: inline-block;
    margin: 0 5px;
    height: 10px;
    border-left: 1px solid #b3b3b3;
  }
  // 工单状态(常量)1:已受理 (当前处理人可看)2:已解决待确认(当前处理人可看) 3:未解决带调度4:正常关闭
  // 5:驳回6:挂起7:外派8:异常关闭
  .workOrderType {
    display: inline-block;
    // padding: 5px 8px;
    width: 66px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 3px;
    &.active-1 {
      // 已受理
      border: 1px solid #c2dfff;
      background-color: #e8f3ff;
      color: #2e92f7;
    }
    &.active-2,
    &.active-3 {
      // 已解决待确认2  正常关闭3
      border: 1px solid #c2e7b0;
      background-color: #f0f9eb;
      color: #67c23a;
    }
    // &.active-3 {
    //   // 未解决带调度
    //   border: 1px solid $type3B;
    //   background-color: $type3BC;
    //   color: $type3C;
    // }
    &.active-4,
    &.active-6 {
      // 驳回 4  // 外派 6
      border: 1px solid #f5dab1;
      background-color: #fdf6ec;
      color: #e6a23c;
    }
    &.active-5 {
      // 挂起5
      border: 1px solid #d5d6d8;
      background-color: #f4f4f5;
      color: #909399;
    }
    &.active-7 {
      // 异常关闭
      border: 1px solid #fbc7c7;
      background-color: #fef0f0;
      color: #f56c6c;
    }
  }
  .duanXuanBtn {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    .el-radio-group {
      margin-left: 15px;
    }
  }
}
// 分页样式
.page-row {
  border: 1px solid #eaeaea;
  height: 48px;
  line-height: 47px;
  &.el-row {
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .el-pagination {
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    line-height: normal;
  }
}
.rejectClose {
  .el-row {
    background-color: $FAFAFA;
    padding: 20px;
    padding-bottom: 0;
    .el-col {
      > div {
        padding-bottom: 15px;
        color: $c7A7A7A;
        display: flex;
        > span {
          font-size: 14px;
          &:nth-child(1) {
            width: 75px;
            display: block;
          }
          &:nth-child(2) {
            flex: 1;
            display: block;
            color: $c333333;
          }
        }
      }
    }
  }
  .TrueRejectTips {
    padding: 5px 12px;
    background-color: $F5F7FA;
    color: $c797A7B;
    margin-left: 85px;
  }
  .el-form-item {
    padding-bottom: 20px;
  }
  .el-textarea {
    width: 775px;
  }
}
.caozouBox {
  margin: 0 0 20px 0;
  > span {
    margin-right: 20px;
  }
}
::v-deep .rejectClose .el-dialog__body {
  padding: 5px 20px 20px;
}
::v-deep .el-checkbox .el-checkbox__label {
  font-size: 12px;
}
.closeDialog {
  .btns {
    padding-top: 30px;
    text-align: right;
  }
  .userInfo {
    overflow: hidden;
    > img,
    ul {
      float: left;
    }
    > img {
      border-radius: 50%;
      height: 60px;
      width: 60px;
      background-color: #999;
    }
    > ul {
      padding: 5px 15px;
      li {
        height: 20px;
        line-height: 20px;
      }
    }
  }
  .organs {
    margin-right: 25px;
  }
  .input-with-select {
    width: 250px !important;
    .searchBtn {
      height: 35px;
      box-sizing: border-box;
    }
  }
}
::v-deep .el-radio-button--medium .el-radio-button__inner {
  padding: 0 25px !important;
  height: 40px !important;
  line-height: 40px !important;
}
::v-deep .closeDialog .el-form-item__label {
  font-size: 14px !important;
  font-weight: 400;
  text-align: left;
}
::v-deep .expatriateClose {
  .el-input {
    width: 360px;
  }
  .el-form-item__label {
    text-align: right;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item__error {
    left: 100px;
  }
}
::v-deep .closeDialog .closeInfo {
  float: none;
}
::v-deep .closeDialog .starts {
  .el-form-item__label {
    width: 70px !important;
  }
  .el-rate {
    height: 40px;
  }
  .el-rate__item {
    height: 100%;
    line-height: 40px;
    .el-rate__icon {
      vertical-align: middle;
    }
  }
}
::v-deep .closeDialog .el-form-item__content {
  margin-left: 0 !important;
  .el-textarea__inner {
    height: 100%;
  }
}
::v-deep .workOrderClass {
  .el-dialog {
    width: 900px;
  }
  .el-input {
    width: 260px;
  }
  .el-input-group__append {
    padding: 0 15px !important;
    background-color: #f5f7fa !important;
    width: auto;
  }
}
::v-deep .rejectClose .el-form-item__label {
  text-align: right;
  width: 85px;
}
::v-deep .rejectClose {
  .el-input {
    width: 260px;
  }
  .el-form-item__error {
    margin-left: 85px;
  }
  .el-radio-group {
    vertical-align: sub;
  }
}
::v-deep .checkGroup .el-form-item__content {
  line-height: 33px;
  height: 33px;
}
</style>
